<template>
  <div>
    <div class="goodsrecycle-mokuai">
      <!-- 筛选查找 -->
      <div class="goodsrecycle-index">
        <div class="goodsrecycle-index-top">
          <div class="goodsrecycle-name">
            <div class="goodsrecycle-name-font">
              <i class="el-icon-search"></i>
              筛选查询
            </div>
            <div class="goodsrecycle-name-right">
              <el-button @click="onSubmit()">查询结果</el-button>
            </div>
            <div class="goodsrecycle-name-right">
              <a @click="packUp">
                <i class="el-icon-arrow-up"></i>
                收起筛选
              </a>
            </div>
          </div>
          <div class="goodsrecycle-content">
            <!-- 筛选条件 -->
            <div class="goodsrecycle-button-select-2" v-if="showPrise">
              <el-form
                :inline="true"
                :model="listLine"
                class="demo-form-inline"
              >
                <el-form-item label="输入搜索:">
                  <el-input
                    v-model="formInline.OrderName"
                    placeholder="商品名称/货号"
                    class="select-width-1"
                  ></el-input>
                </el-form-item>
                <el-form-item label="提醒状态:">
                  <el-select v-model="formInline.orderStatus">
                    <el-option label="未发送" value="weiOut"></el-option>
                    <el-option label="已发送" value="yiOut"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="设置时间:">
                  <div class="block">
                    <el-date-picker
                      v-model="date"
                      align="right"
                      type="date"
                      placeholder="选择日期"
                      :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <!-- 数据模块 -->
      <div class="goodsrecycle-index">
        <div class="goodsrecycle-index-top">
          <div class="goodsrecycle-name">
            <div class="goodsrecycle-name-font">
              <i class="el-icon-s-unfold"></i>
              数据列表
            </div>
            <div class="goodsrecycle-index-select">
              <el-form
                :inline="true"
                :model="listLine"
                class="demo-form-inline"
                size="small"
              >
                <!-- <el-form-item label="">
                  <el-select
                    v-model="listLine.row"
                    placeholder="显示条数"
                    class="select-width-2"
                  >
                    <el-option label="10条" value="10"></el-option>
                    <el-option label="20条" value="20"></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item label="">
                  <el-select
                    v-model="listLine.sort"
                    placeholder="排序方式"
                    class="select-width-2"
                  >
                    <el-option label="编号" value="id"></el-option>
                    <el-option label="货号" value="goodsNum"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="goodsrecycle-content">
            <!-- 数据列表 -->
            <div>
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column label="编号" width="80" align="center">
                  <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column
                  prop="userName"
                  label="用户名"
                  width="90"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="telPhone"
                  label="手机号码"
                  width="100"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="mailAddr"
                  label="邮箱地址"
                  width="90"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="goodName"
                  label="商品名称"
                  width="160"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="goodNum"
                  label="商品货号"
                  width="120"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="setDate"
                  label="设置时间"
                  width="140"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="warnStatus"
                  label="提醒状态"
                  width="100"
                  align="center"
                >
                </el-table-column>

                <el-table-column fixed="right" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      @click="deleteRow(scope.$index, tableData)"
                      type="text"
                      size="small"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- 页脚 -->
            <div class="goodsrecycle-paging">
              <!-- 批量操作 -->
              <div class="goodsrecycle-paging-leftlayout">
                <div class="opertation-block">
                  <!-- 全选需要设置方法目前只能操作0，1数据 -->
                  <el-button @click="toggleSelection(tableData)" size="small"
                    >全选</el-button
                  >
                </div>
                <div class="opertation-block">
                  <el-form
                    :inline="false"
                    :model="operation"
                    class="demo-form-inline"
                    size="small"
                  >
                    <el-form-item label="">
                      <el-select
                        v-model="operation.opertationType"
                        placeholder="批量操作"
                        class="select-width-2"
                      >
                        <el-option label="删除" value="0"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="opertation-block">
                  <el-button size="small" @click="Sumbit">确定</el-button>
                </div>
              </div>
              <!-- 分页 -->
              <div class="goodsrecycle-paging-layout">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="500"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 自定义 */
.el-form-item {
  width: 30%;
}
a {
  color: black;
  text-decoration: none;
}
a:hover {
  color: blue;
}
.select-width-1 {
  width: 220px;
}
.select-width-2 {
  width: 100px;
}
.goodsrecycle-mokuai {
  height: 1000px;
  background-color: rgb(249, 249, 249);
}
.goodsrecycle-index {
  width: 100%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.goodsrecycle-index-top {
  margin-top: 30px;
}
.goodsrecycle-name {
  width: 100%;
  height: 50px;
  padding-top: 10px;
  background-color: rgb(240, 240, 240);
}
.goodsrecycle-name-font {
  height: 40px;
  line-height: 40px;
  float: left;
  margin-left: 20px;
  font-size: 14px;
}
.goodsrecycle-name-right {
  height: 40px;
  line-height: 40px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
}
.goodsrecycle-index-select {
  width: 260px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
  padding-top: 5px;
}
.goodsrecycle-content {
  text-align: center;
  width: 100%;
}
.goodsrecycle-button-select-2 {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
}

.opertation-block {
  display: inline-block;
  margin-left: 3px;
}
.goodsrecycle-paging {
  height: 50px;
  width: 100%;
  background-color: rgb(253, 253, 254);
}
.goodsrecycle-paging-leftlayout {
  float: left;
  margin-top: 7px;
}
.goodsrecycle-paging-layout {
  float: right;
  margin-top: 7px;
}
</style>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date())
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit("pick", date)
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit("pick", date)
            }
          }
        ]
      },
      date: "",
      date2: "",
      // 隐藏
      showPrise: true,
      // 筛选
      formInline: {
        OrderName: "",
        UserNmae: ""
      },
      listLine: {
        row: "",
        sort: ""
      },
      operation: {
        opertationType: ""
      },
      // 列表数据
      tableData: [
        {
          id: "1000001",
          userName: "18000000000",
          telPhone: "18000000000",
          mailAddr: "88888888@qq.com",
          goodName: "2018 iphoneXsMax128GB",
          goodNum: "No999999",
          setDate: "2018-06-15 14:35:51",
          warnStatus: "未发送"
        },
        {
          id: "1000001",
          userName: "18000000000",
          telPhone: "18000000000",
          mailAddr: "88888888@qq.com",
          goodName: "2018 iphoneXsMax128GB",
          goodNum: "No999999",
          setDate: "2018-06-15 14:35:51",
          warnStatus: "未发送"
        },
        {
          id: "1000001",
          userName: "18000000000",
          telPhone: "18000000000",
          mailAddr: "88888888@qq.com",
          goodName: "2018 iphoneXsMax128GB",
          goodNum: "No999999",
          setDate: "2018-06-15 14:35:51",
          warnStatus: "未发送"
        },
        {
          id: "1000001",
          userName: "18000000000",
          telPhone: "18000000000",
          mailAddr: "88888888@qq.com",
          goodName: "2018 iphoneXsMax128GB",
          goodNum: "No999999",
          setDate: "2018-06-15 14:35:51",
          warnStatus: "未发送"
        }
      ],

      multipleSelection: [],
      // 分页
      currentPage4: 4
    }
  },
  methods: {
    // 数据列表
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    onSubmit(formInline) {
      this.$refs[formInline].validate(valid => {
        if (valid) {
          alert("submit!")
          this.visible = false
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    packUp() {
      this.showPrise = !this.showPrise
      console.log("submit!")
    },
    //删除
    deleteRow(index, rows) {
      rows.splice(index, 1)
    }
  }
}
</script>
